<template>
  <div class='main'>
      <div class="topBox">
          <van-icon name="chat-o" class="fl"/>
          <van-icon name="setting-o" class="fr"/>
          <!-- 圆形图片 -->
            <van-image
                round
                width="100px"
                height="100px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
      </div>

        <!-- 第一个列表 -->
        <van-grid :column-num="4" :border=false>
            <van-grid-item v-for="(item,index) in list1" :icon="item.img" :key="index" :text="item.text" />
        </van-grid>


    <div class="text">
        <span class="text1">宜居管家</span>
        <span class="text2">宜居专享服务</span>
    </div>

    <!-- 第二个列表 -->
    <van-grid :column-num="3" :border=false>
        <van-grid-item v-for="(item,index) in list2" :key="index" :icon="item.img" :text="item.text" />
    </van-grid>
    
    <Buttom></Buttom>

  </div>
</template>

<script>
let baseUrl = 'http://iwenwiki.com/api/livable/center/list/'

import Buttom from '../components/Buttom'

export default {
  name: '',
  data () {
    return {
        list1:[
            {
                img:baseUrl + 'icon_youhuiquan.png',
                text:'优惠券'
            },
            {
                img:baseUrl + 'icon_shoucang.png',
                text:'收藏'
            },
            {
                img:baseUrl + 'icon_yuekan.png',
                text:'约看'
            },
            {
                img:baseUrl + 'icon_dingfdan.png',
                text:'订单'
            },
            {
                img:baseUrl + 'icon_sirenzhuli.png',
                text:'私人助理'
            },
            {
                img:baseUrl + 'icon_weiliao.png',
                text:'微聊'
            },
            {
                img:baseUrl + 'icon_pingjia.png',
                text:'评价'
            },
            {
                img:baseUrl + 'icon_tousu.png',
                text:'投诉建议'
            }
        ],
        list2:[
            {
                img:baseUrl + 'icon_hetong.png',
                text:'我的合同'
            },
            {
                img:baseUrl + 'icon_zhuanzu.png',
                text:'转租'
            },
            {
                img:baseUrl + 'icon_tuizu.png',
                text:'退租'
            },
            {
                img:baseUrl + 'icon_zhimaxinyong.png',
                text:'芝麻信用'
            },
            {
                img:baseUrl + 'icon_xuzu.png',
                text:'续租'
            },
            {
                img:baseUrl + 'icon_zhangdan.png',
                text:'账单'
            }
        ],
    }
  },
  watch: {
      
  },
  props: {
  },
  components: {
    Buttom
  },
  computed: {

  },
  mounted() {

  },
  methods: {

  },
  filters: {

  }
}
</script>

<style scoped lang='css'>
    .topBox {
        width: 100%;
        height: 182px;
        text-align: center;
        background-color: #FF5654;
    }

    .fl {
        float: left;
        font-size: 20px;
        color: #fff;
        margin: 36px 0 0 10px;
    }

    .fr {
        float: right;
        font-size: 20px;
        color: #fff;
        margin: 36px 10px 0 0;
    }

    .van-image {
        margin-top: 56px;
    }

    .van-grid {
        margin: 10px;
        overflow: hidden;
        box-shadow: 0 0 6px 1px #ccc;
        border-radius: 4px;
        font-weight: 600;
    }

    .text {
        margin:10px;
    }

    .text1 {
        margin-left: 10px;
        font-size: 15px;
    }

    .text2 {
        margin-left: 10px;
        font-size: 10px;
    }
</style>